<template>
  <div id='tmpl'>
      <div id="desc" v-for="item in photoinfo"> 
        <div id="title">
            <h4>{{item.title}}</h4>
            <p>{{item.add_time | datefmt("YYYY-MM-DD HH:mm:ss")}} {{item.click}}次浏览</p>
            <hr>
        </div>
         <div class="mui-content">
		        <ul class="mui-table-view mui-grid-view mui-grid-9">
		            <li v-for="(item, index) in list" class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
                            
		                    <img class="preview-img"  :src="item.src" height="100" @click="$preview.open(index, list)">
                    </li>
		        </ul> 
		</div>
        <p v-html="item.content"></p>
      </div>
      <div id="comment">
           <comment :id='id'> </comment>
      </div>
  </div>
   
</template>
<script>
import comment from '../subcom/comment.vue';
import common from '../kits/common.js';
import {Toast} from 'mint-ui';
import vm from '../kits/vm.js';
export default {
    components:{
        comment
    },
  data () {
    
    return {
        id:0,
        photoinfo:[],
        list:[]
    }
  },
  created(){
        this.id = this.$route.params.id;
        this.getinfo();
        this.getimg();
    },
  methods:{
      getinfo(){
          var url = common.apidomain+'/api/getimageInfo/'+this.id;
          this.$http.get(url).then(function(res){
               if(res.body.status != 0){
                  Toast(res.body.message);
                  return;
              }
               this.photoinfo = res.body.message
          })
      },
      getimg(){
          var url = common.apidomain+'/api/getthumimages/'+this.id;
           this.$http.get(url).then(function(res){
               if(res.body.status != 0){
                  Toast(res.body.message);
                  return;
              }
                res.body.message.forEach(function(item){
                    // var img = document.createElement('img');
                    var img = new Image();
                    img.src = item.src;
                    item.h = img.height;
                    item.w = img.width;
                })
               this.list = res.body.message
          })
      }
  }
}
</script>
<style lang="css" scoped>
#desc{
    padding: 10px;
}
#desc h4{
    color: #0094ff;
    font-size: 25px;
}
#decs p{
    color: rgba(0, 0,0,0.2);
}
hr{
    color: rgba(0, 0, 0, 0.2);
}
.mint-swipe{
    height: 250px;
   width: 100%;
  }
  .mint-swipe-item{
   width: 100%;
    height: 250px;  
  }
  .mint-swipe-item img{
    height:100%;
    width: 100%;
    display: block;
  }
 #tmpl .mui-content , .mui-grid-view {
    background-color: white;
     margin: 0px;
  }
  .mui-grid-view.mui-grid-9 .mui-table-view-cell{
    border:none;
  }
  .mui-grid-view.mui-grid-9{
      border:none;
  }
  .mui-icon-home:before,.mui-icon-email:before,
  .mui-icon-chatbubble:before,.mui-icon-search:before
  ,.mui-icon-phone:before,.mui-icon-gear:before{
    content:'';
    display: inline-block;
    width:50px;
    height: 50px;
    background-repeat: round;
  }
  .mui-content img{
      width: 100px;
      height: 100px;
  }
</style>